<template>
  <div class="page-container-padding">
    <div>
      <span>记录状态：</span>
      <span>
        <el-select v-model="recordData.state" size="mini">
          <el-option :value="0" label="待处理"></el-option>
          <el-option :value="1" label="已完成"></el-option>
          <el-option :value="-1" label="已拒绝"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 8px">
        <el-button type="primary" size="mini" @click="toQueryData">
          查询
        </el-button>
      </span>
    </div>
    <div style="margin-top: 16px">
      <el-table
        :data="recordData.data"
        border
        stripe
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChangeHandler"
      >
        <el-table-column label="管理" type="expand" width="70">
          <template #default="scope">
            <div style="margin-top: 16px">
              <el-steps
                :active="scope.row.cur_flow"
                align-center
                finish-status="success"
              >
                <el-step title="申请中" description="提交成功,待确认"></el-step>
                <el-step title="申请确认" description="申请信息已确认">
                  <template
                    v-if="scope.row.state > -1 && scope.row.cur_flow === 1"
                    #description
                  >
                    <div style="margin-top: 12px">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="toChangeFlow(scope.row, 1, 1)"
                      >
                        确认申请
                      </el-button>
                      <el-button
                        type="danger"
                        size="mini"
                        @click="toChangeFlow(scope.row, 1, 0)"
                      >
                        拒绝
                      </el-button>
                    </div>
                  </template>
                </el-step>
                <el-step title="审批" description="等待申请审批">
                  <template
                    v-if="scope.row.state > -1 && scope.row.cur_flow === 2"
                    #description
                  >
                    <div style="margin-top: 12px">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="toChangeFlow(scope.row, 2, 1)"
                      >
                        通过申请
                      </el-button>
                      <el-button
                        type="danger"
                        size="mini"
                        @click="toChangeFlow(scope.row, 2, 0)"
                      >
                        拒绝
                      </el-button>
                    </div>
                  </template>
                </el-step>
                <el-step title="账号处理中" description="等待发送系统帐号">
                  <template
                    v-if="scope.row.state > -1 && scope.row.cur_flow === 3"
                    #description
                  >
                    <div style="margin-top: 12px">
                      <el-button
                        type="primary"
                        size="mini"
                        @click="toChangeFlow(scope.row, 3, 1)"
                      >
                        发送完成
                      </el-button>
                      <el-button type="danger" size="mini" @click="toChangeFlow(scope.row, 3, 0)">拒绝</el-button>
                    </div>
                  </template>
                </el-step>
                <el-step
                  title="已完成"
                  description="资料已发送至邮箱"
                ></el-step>
              </el-steps>
              <div
                v-if="scope.row.state > -1 && scope.row.state < 3"
                style="margin: 16px 70px"
              >
                <span>操作说明：</span>
                <el-input
                  v-model="expandRow.fact_desc"
                  placeholder="可在此填写操作的说明，再点击是否通过或拒绝，拒绝时必填。"
                  style="width: 500px"
                  size="mini"
                ></el-input>
              </div>
              <div
                v-if="scope.row.state === -1"
                style="margin: 16px 70px; color: #e41714"
              >
                {{ scope.row.state_plain }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="admin_name"
          label="申请人"
          width="160"
          show-overflow-tooltip
        />
        <el-table-column prop="create_time" label="创建时间" width="160" />
        <el-table-column prop="use_name" label="帐户姓名" />
        <el-table-column prop="use_account" label="交易账户" />
        <el-table-column prop="use_phone" label="客户手机" />
        <el-table-column prop="use_email" label="客户邮箱" />
        <el-table-column
          show-overflow-tooltip
          prop="link_msg"
          label="联系申请人"
        />
        <el-table-column label="状态" width="70">
          <template #default="scope">
            <div :class="scope.row.state < 0 ? 'red' : 'green'">
              {{ scope.row.state_text }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="正式够买" width="80" align="center">
          <template #default="scope">
            <span>{{ scope.row.is_official === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码器 -->
    <div style="margin-top: 8px">
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="recordData.page"
        :page-size="recordData.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="recordData.totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
  import { GetUserListByName } from '@/api/systemManage/userInfo'
  import { QueryZhenduan, FinishApplyRecord, FlowApplyRecord } from '@/api/prodService/zhenduan'
  export default {
    data() {
      return {
        recordData: {
          data: [],
          page: 1,
          pageSize: 30,
          state: 0,
          totalCount: 0,
        },
        toWorker: {
          userLoading: false,
          userList: [],
          worker_id: null,
          record_id: -1,
          row_state: 1,
          state_plain: '',
        },
        expands: [],
        activeWorkRecordLoading: false,
        expandRow: {
          record_id: -1,
          annex_url: '',
          annex_file: null,
          annex_filename: '',
          is_public: true,
          fact_desc: '',
        },
        annexUploading: false,
      }
    },
    mounted() {
      this.getTableData()
    },
    methods: {
      getTableData() {
        QueryZhenduan(
          this.recordData.page,
          this.recordData.pageSize,
          this.recordData.state
        ).then((res) => {
          // console.log(res)
          const data = res.data
          this.recordData.data = data.data
          this.recordData.page = data.page
          this.recordData.totalCount = data.total_count
        })
      },
      currentPageChanged(page) {
        this.recordData.page = page
      },
      toQueryData() {
        this.recordData.page = 1
        this.getTableData()
      },

      toChangeFlow(row, flow, fact) {
        // 参数， row-行数据， flow-流程index，fact-是否通过
        const bodydata = {
          rid: row.id,
          flow_flag: flow,
          fact_state: fact,
          fact_desc: this.expandRow.fact_desc,
        }
        console.log(bodydata)
        if (bodydata.fact_state === 0 && bodydata.fact_desc.length < 1) {
          this.$baseMessage('请填写拒绝的理由后，再提交!', 'error')
          return
        }
        FlowApplyRecord(bodydata).then((res) => {
          console.log(res)
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          this.getTableData()
        })
      },

      getRowKeys(row) {
        return row.id
      },
      // 展开的事件
      expandChangeHandler(row, expandedRows) {
        if (expandedRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id)
            this.toWorker.record_id = row.id
            this.expandRow.record_id = row.id
            this.expandRow.annex_file = null
            this.expandRow.annex_filename = row.annex_name || ''
            this.expandRow.annex_url = row.annex_url || null
            this.expandRow.is_public = row.annex_public || true
            if (row.state === -1) {
              this.toWorker.row_state = -1
              this.toWorker.state_plain = row.state_plain
            }
          }
        } else {
          this.expands = []
        }
      },

      // 附件选择改变
      annexChange(file) {
        // console.log(file)
        const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1)
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx'].indexOf(fileSuffix) < 0) {
          this.$baseMessage('只能上传pdf,docx,pptx类型的文件!', 'error')
          return
        }
        this.expandRow.annex_file = file.raw
        this.expandRow.annex_filename = file.name
      },

      // 完成申请附件发送
      toFinishApply(row) {
        if (this.expandRow.record_id !== this.expands[0]) {
          this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
          return
        }
        // 附件强制
        if (!this.expandRow.annex_file) {
          this.$baseMessage('您还未选择附件文件!', 'error')
          return
        }
        this.annexUploading = true
        let dataForm = new FormData()
        dataForm.append('state', this.toWorker.row_state)
        dataForm.append('state_plain', this.toWorker.state_plain)
        dataForm.append('rid', this.expandRow.record_id)
        if (this.expandRow.annex_file) {
          dataForm.append('annex', this.expandRow.annex_file)
          dataForm.append('annex_public', this.expandRow.is_public)
        }
        FinishApplyRecord(dataForm).then((res) => {
          // console.log(res)
          this.$baseMessage(res.msg, 'success')
          this.getTableData()
          this.annexUploading = false
        })
      },

      // 使用名称搜索用户
      getUserByName(name) {
        if (name === '') {
          return
        }
        this.toWorker.userLoading = true
        GetUserListByName(name).then((res) => {
          this.toWorker.userList = res.data
          this.toWorker.userLoading = false
        })
      },

      // 分配任务，改变状态
      toDispatchWorker(row) {
        // console.log(row)
        if (this.toWorker.record_id !== this.expands[0]) {
          this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
          return
        }
        if (!this.toWorker.worker_id && this.toWorker.row_state !== -1) {
          this.$baseMessage('您还未选择分配给的人员!', 'error')
          return
        }
        const bodyData = {
          rid: this.toWorker.record_id,
          worker_id: this.toWorker.worker_id,
          state: this.toWorker.row_state,
          explain_state: this.toWorker.state_plain,
        }
        if (bodyData.state == -1) {
          bodyData.worker_id = 0
        }
        DispatchAnaysisReport(bodyData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.getTableData()
        })
      },

      // 手动将记录添加到非常态工作
      toAddWorkRecord() {
        this.$baseMessage('您无需这么做!', 'info')
        // if (this.toWorker.record_id !== this.expands[0]) {
        //   this.$baseMessage('程序内部错误,操作对象ID ERROR!', 'error')
        //   return
        // }
        // this.$baseConfirm(
        //   '您将在非常态工作中新增一条记录，确定吗?',
        //   '操作确认',
        //   () => {
        //     ActiveAddWorkRecord(this.toWorker.record_id).then((res) => {
        //       this.$baseMessage(res.msg, 'success')
        //     })
        //   }
        // )
      },
    },
  }
</script>
<style scoped lang="scss">
  .green {
    color: #0dd068;
  }
  .red {
    color: #e74736;
  }
  .hand-action {
    text-align: right;
    margin: 0 8px 16px 0;
    cursor: pointer;
  }

  .el-table ::v-deep .el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  .el-table ::v-deep .el-table__expand-icon .el-icon-arrow-right:before {
    content: '\e6d9';
    // border: 1px solid #ccc;
    // padding: 2px;
    font-weight: 700;
    color: #f74e1e;
  }

  .el-table
    ::v-deep
    .el-table__expand-icon--expanded
    .el-icon-arrow-right:before {
    content: '\e6d8';
  }
</style>
